<template>
  <div>
    <a-card>
      <div class="text-xl font-bold mb-4">工时统计</div>
      <a-flex justify="justify-content" align="center">
        时间：
        <a-radio-group
          v-model:value="period"
          @change="changePeriod"
          button-style="solid"
        >
          <a-radio-button value="day">当日</a-radio-button>
          <a-radio-button value="week">当周</a-radio-button>
          <a-radio-button value="month">当月</a-radio-button>
          <a-radio-button value="year">当年</a-radio-button>
          <a-radio-button value="custom">自定义</a-radio-button>
        </a-radio-group>
        <div style="width: 100px"></div>
        <a-space v-show="period == 'custom'">
          时间段：
          <a-range-picker
            v-model:value="rangeDate"
            :format="'YYYY-MM-DD'"
            :valueFormat="'YYYY-MM-DD'"
          />
        </a-space>
        <div style="width: 100px"></div>
        维修工：
        <a-select
          style="width: 200px"
          v-model:value="user_id"
          :options="userOpt"
        >
        </a-select>
        <div style="width: 20px"></div>

        <a-button type="primary" @click="onSubmit">查询</a-button>
      </a-flex>
      <div class="mt-3">
        <vxe-toolbar ref="toolbarRef" export print></vxe-toolbar>
        <vxe-table
          :export-config="{ type: 'xlsx' }"
          border
          show-overflow
          show-footer
          keep-source
          :is-hover="true"
          size="small"
          ref="xTable"
          :column-config="{ resizable: true }"
          min-height="400"
          :data="records"
          :footer-method="footerMethod"
          :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
        >
          <vxe-column
            field="user_id"
            title="维修工ID"
            :edit-render="{}"
            sortable
          >
          </vxe-column>
          <vxe-column
            field="name"
            title="维修工名称"
            sortable
            :edit-render="{}"
          >
          </vxe-column>
          <vxe-column field="data" title="工时" sortable :edit-render="{}">
          </vxe-column>
        </vxe-table>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { message } from "ant-design-vue";
import Api from "@/api/backend/api";
const period = ref("day");
const xGrid = ref();

const user_id = ref(null);
const start_at = ref("");
const end_at = ref("");
const loading = ref(false);
const xTable = ref();
const toolbarRef = ref();
const userOpt = ref([]);
const getEmployee = async () => {
  let data = await Api.userController.employeeList();
  userOpt.value = data.map((item) => {
    return {
      label: item.name,
      value: item.id,
    };
  });
  userOpt.value.push({
    label: "全部",
    value: null,
  });
};
getEmployee();

onMounted(() => {
  const $table = xTable.value;
  const $toolbar = toolbarRef.value;
  if ($table && $toolbar) {
    $table.connect($toolbar);
  }
});

const dataState = ref({
  categories: [],
  data: [],
});
const records = ref([]);

const rangeDate = ref();
const onSubmit = async () => {
  if (period.value == "custom") {
    if (rangeDate.value == null) {
      return message.error("请选择时间段");
    }
    const res = await Api.dashboardController.employee({
      period: period.value,
      start_at: rangeDate.value[0],
      end_at: rangeDate.value[1],
      user_id: user_id.value,
    });
    records.value = res;
    return;
  }
  const res = await Api.dashboardController.employee({
    period: period.value,
    user_id: user_id.value,
  });
  records.value = res;
};

const showCustomSearch = ref(false);
const changePeriod = async (val) => {
  if (period.value == "custom") {
    return;
  }
};

const footerMethod: VxeTablePropTypes.FooterMethod<ReceiptItemModel> = ({
  columns,
  data,
}) => {
  return [
    columns.map((column, columnIndex) => {
      if (columnIndex === 0) {
        return "合计";
      }
      if (columnIndex === 2) {
        return `数量： 共 ${sumNum(data, "data")}`;
      }
      return "-";
    }),
  ];
};
const sumNum = (list: ReceiptItemModel[], field: string) => {
  let count = 0;
  list.forEach((item) => {
    count += Number(item[field]);
  });
  return count;
};
const countAmount = (row: ReceiptItemModel) => {
  let mount = row.score;
  return mount;
};
const countAllAmount = (data: ReceiptItemModel[]) => {
  let count = 0;
  data.forEach((row) => {
    count += countAmount(row);
  });
  return count;
};
</script>

<style></style>
